function UI_Camara(controles){
	
	var _controls = controles;
	
	var _domAreaDespl = $("#areaDesplCamara"); 
	var _domAreaDesplTarget = $("#imgDesplImg");
	var _domAreaDesplOverlay = $("#imgDesplImgOverlay"); 
	
	
	var _domAreaOrient = $("#areaOrientacionCamara"); 
	var _domAreaOrientTarget = $("#imgOrientImg");
	var _domAreaOrientOverlay = $("#imgOrientImgOverlay"); 
	
	var _domBtnZoomIn = $("#btnZoomIn"); 
	var _domBtnZoomOut = $("#btnZoomOut");
	
	$( "#divControlesCamara" ).draggable({ cursor: 'pointer', /*containment: 'parent'*/ });

	
	if(CONSTANTS.MOSTRAR_PANEL_CAMARA_AL_INICIO){		
		$("#btnAbrirPanelCamara").hide();
		$("#divControlesCamara").show();
	}else{
		$("#divControlesCamara").hide();
		$("#btnAbrirPanelCamara").show();
	}
	
	///en header
	$("#btnAbrirPanelCamara").click(function(event){
		$("#divControlesCamara").show();
		$(this).hide();
		
		 COOKIE_CONTROLLER.saveValue('MOSTRAR_PANEL_CAMARA_AL_INICIO',true);
	});
	
	$("#btnCerrarPanelCamara").click(function(event){
		$("#divControlesCamara").hide();
		$("#btnAbrirPanelCamara").show();
		
		 COOKIE_CONTROLLER.saveValue('MOSTRAR_PANEL_CAMARA_AL_INICIO',false);
	});
	
	
	//<<<<<<<Funciones de actualizacion de los componentes>>>>>>>>
	var updateFunctionDisp = function(event, vector, width, height){
	
		CONTROLLER_PAGE_STATE.hideActiveSprite();
		
		params = {};
		params.type = 'panel_camara_desplazamiento';
		params.event = event;
		params.vector = vector;
		params.width = width;
		params.height = height;
		
		WEBGL.activeWrapper().handleEvent(params);
	}; 
	
	var updateFunctionOrient = function(event, vector, width, height){
		CONTROLLER_PAGE_STATE.hideActiveSprite();
		params = {};
		params.type = 'panel_camara_orientacion';
		params.event = event;
		params.vector = vector;
		params.width = width;
		params.height = height;
		
		WEBGL.activeWrapper().handleEvent(params);
	};
		
	var updateFunctionZoom = function(event){
		CONTROLLER_PAGE_STATE.hideActiveSprite();
		var value = 'zoomIn';
		if (event.currentTarget.id == $(_domBtnZoomIn).attr("id")) value = 'zoomOut';
				
		params = {};
		params.type = 'panel_camara_zoom';
		params.event = event;
		params.action = value;
		
		WEBGL.activeWrapper().handleEvent(params);
	};
	
	
	//<<creamos los componentes del panel para los controles de la camara>>
	var circuloDesplazamiento = new circleInput(_domAreaDespl, _domAreaDesplTarget,  updateFunctionDisp, _domAreaDesplOverlay);//1� elemento, 2� funcion actualizacion, 3� overlay (superposicion)
	var circuloOrientacion = new circleInput(_domAreaOrient, _domAreaOrientTarget,  updateFunctionOrient, _domAreaOrientOverlay); 
	var zoomControls = new zoomInput( _domBtnZoomIn, _domBtnZoomOut,  updateFunctionZoom); 
	
	
}